
<script type="text/x-template" id="video-play-dialog">
    <el-dialog  :visible.sync="videoPlayDialogVisible" style="width: 100%" :before-close="closeVideoPlayDialog">
            <div class="play-container">
                <video
                        id="my-player"
                        class="video-js"
                        controls
                        preload="auto"
                        <#--poster="//vjs.zencdn.net/v/oceans.png"-->
                        :poster="data.poster"
                        width="720px"
                        height="400px"
                        data-setup='{}'>
                    <#--<source src="https://test-bce-upload.bj.bcebos.com/tencent/电视剧/三生三世枕上书_01.mp4?authorization=bce-auth-v1/4326822e4a1f428b95e2cb0fec9ad1ec/2020-05-14T02:31:03Z/432000/host/e5bf9dd5b6b7edcbadaa8aa6a61c884cb91b471e398c3673b1a170c743210429" type="video/mp4"></source>-->
                    <#--<source :src="data.video" :type="data.type"></source>-->
                    <source  v-for="(item, index) in data.video" :src="item.url" :type="item.type"></source>
                    <p class="vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a
                        web browser that
                        <a href="https://videojs.com/html5-video-support/" target="_blank">
                            supports HTML5 video
                        </a>
                    </p>
                </video>

                        <#--<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered">-->
                            <#--<!-- <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv">   &ndash;&gt;-->
                        <#--</video>-->

        </div>
    </el-dialog>
</script>

<script>
    Vue.component('video-play-dialog', {
        template: '#video-play-dialog',
        props:['data'],
        data: function () {
            return {
                videoPlayDialogVisible:true
            };
        },
        created: function () {

        },
        computed: {
        },
        methods: {
           closeVideoPlayDialog(){
               this.$emit('close')
           },

            loadVideo(){

            }
        }
        ,
        mounted: function () {
//            var i = 0
//            var list = this.data.video
//            var player = videojs("my-player", {
//                "width":"720px",
//                "height":"400px",
//                "poster":"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg",
//                "autoplay":true,
//                "controls": true,
//                "sources": [{
//                    src: list[i].url,
//                    type: list[i].type
//                }],
//
//            }, function(){
//                this.on('loadeddata',function(){
//
//                })
//                this.on('ended',function(){
//                    i++;
//                    if(i >= list.length){
//                        i = 0;
//                    }
//                    var videoObj = list[i];
//                    this.src({type: videoObj.type, src: videoObj.url});
//                    this.play();
//                })
//
//            });
        }
    })
</script>

<style>
    .video-js{ /* 给.video-js设置字体大小以统一各浏览器样式表现，因为video.js采用的是em单位 */
        font-size: 14px;
        width: 720px;
        height: 400px;
        object-fit: fill;
    }
    .video-js button{
        outline: none;
    }
    .video-js.vjs-fluid,
    .video-js.vjs-16-9,
    .video-js.vjs-4-3{ /* 视频占满容器高度 */
        height: 100%;
        background-color: #161616;
    }
    .vjs-poster{
        background-color: #161616;
    }
    .video-js .vjs-big-play-button{ /* 中间大的播放按钮 */
        font-size: 2.5em;
        line-height: 2.3em;
        height: 2.5em;
        width: 2.5em;
        -webkit-border-radius: 2.5em;
        -moz-border-radius: 2.5em;
        border-radius: 2.5em;
        background-color: rgba(115,133,159,.5);
        border-width: 0.12em;
        margin-top: -1.25em;
        margin-left: -1.75em;
    }
    .video-js.vjs-paused .vjs-big-play-button{ /* 视频暂停时显示播放按钮 */
        display: block;
    }
    .video-js.vjs-error .vjs-big-play-button{ /* 视频加载出错时隐藏播放按钮 */
        display: none;
    }
    .vjs-loading-spinner { /* 加载圆圈 */
        font-size: 2.5em;
        width: 2em;
        height: 2em;
        border-radius: 1em;
        margin-top: -1em;
        margin-left: -1.5em;
    }
    .video-js .vjs-control-bar{ /* 控制条默认显示 */
        display: flex;
    }
    .video-js .vjs-time-control{display:block;}
    .video-js .vjs-remaining-time{display: none;}

    .vjs-button > .vjs-icon-placeholder:before{ /* 控制条所有图标，图标字体大小最好使用px单位，如果使用em，各浏览器表现可能会不大一样 */
        font-size: 22px;
        line-height: 1.9;
    }
    .video-js .vjs-playback-rate .vjs-playback-rate-value{
        line-height: 2.4;
        font-size: 18px;
    }
    /* 进度条背景色 */
    .video-js .vjs-play-progress{
        color: #ffb845;
        background-color: #ffb845;
    }
    .video-js .vjs-progress-control .vjs-mouse-display{
        background-color: #ffb845;
    }
    .vjs-mouse-display .vjs-time-tooltip{
        padding-bottom: 6px;
        background-color: #ffb845;
    }
    .video-js .vjs-play-progress .vjs-time-tooltip{
        display: none!important;
    }
    .play-container{
        width: 720px;
        height: 400px;
        background-color: #1d2229
    }
</style>